import React, { useState }from 'react'
import { Input, DatePicker } from 'antd'
import style from "./index.module.scss"


export const SearchComponent = (Search) => {
    //搜索内容
    let searchObj = {
        phone: '',
        name: '',
        time: ''
    }
    const onChange1 = (e) => {
        // if(e.target.value.length){

        // }
        searchObj.phone = parseInt(e.target.value)
        // console.log(String(searchObj.phone).length);
    }
    const onChange2 = (e) => {
        searchObj.name = e.target.value
    }
    const onChange3 = (date, dateString) => {
        console.log(dateString);
        searchObj.time = dateString
    }
    const search = () => {
        if((String(searchObj.phone).length+searchObj.name.length+searchObj.time.length)>0){
            Search(searchObj)
        }
        console.log('Search');
        
    }

    return (
        <div className={style.ManagementSearch}>
            <div>
                <span>消息标题：</span>
                <Input className={style.input} defaultValue="" placeholder='用户ID/手机号' onChange={onChange1} />
            </div>
            <div>
            <span>发布人员：</span>
                <Input className={style.input} defaultValue="" placeholder='用户姓名' onChange={onChange2} />
            </div>
            <div className={style.timeChange}>
            <span>发布时间：</span>
                <DatePicker className={style.input} onChange={onChange3} />
            </div>
            <button className={style.searchBtn} type="primary" onClick={search}>
                查询
            </button >
            <div className={style.right}></div>
        </div>
    )
}
